@import './variables';

:root {
	--theme-color: #{$global-theme-color};
	--theme-color-light: #{$global-theme-color-light};

	--color-text: #{$global-color-text};
	--color-text-light: #{$global-color-text-light};
	--color-text-lighter: #{$global-color-text-lighter};
	--color-icon: #{$global-color-icon};
	--color-icon-lightest: #{$global-color-icon-lightest};
	--color-border: #{$global-color-border};
	--color-bg: #{$global-color-bg};
	--color-bg-light: #{$global-color-bg-light};
	--color-bg-lighter: #{$global-color-bg-lighter};
	--color-bg-lightest: #{$global-color-bg-lightest};
	--color-disabled: #{$global-color-disabled};
	--font-size-h1: #{$global-font-size-h1};
	--font-size-h2: #{$global-font-size-h2};
	--font-size-h3: #{$global-font-size-h3};
	--font-size-h4: #{$global-font-size-h4};
	--font-size-h5: #{$global-font-size-h5};
	--font-size-h6: #{$global-font-size-h6};
  --z-index-top: #{$global-z-index-top};
}

html {
	&.dark {
		--color-text: #adbac7;
		--color-text-light: #96a7b7;
		--color-text-lighter: #4e6e8e;
		--color-text-lightest: #6a8bad;
		--color-icon: #adbac7;
		--color-icon-lightest: #8094a8;
		--color-border: #3e4c5a;
		--color-bg: #22272e;
		--color-bg-light: #2b313a;
		--color-bg-lighter: #262c34;
	}
}

* {
	box-sizing: border-box;
}

@for $i from 1 through 6 {
	h#{$i},
	.h#{$i} {
		margin: 0;
		line-height: 1;
		font-size: var(--font-size-h#{$i});
	}
}

i {
	color: var(--color-icon);
}
